<template>
    <div class="page">
        <ChfGrid v-bind="gridOptions" ref="grid">
            <!-- <template #input>
                <el-input v-model="value" style="margin-right:10px;width:150px"></el-input>
            </template> -->
        </ChfGrid>
    </div>
</template>



<script>
import formConfigFn from "./formConfig.js";
import grid from "@/mixins/grid.js";
export default {
    mixins: [grid],
    name: "user",
    data () {
        return {
            value: 1,
            formConfig: formConfigFn.call(this),
            gridOptions: {
                tableConfig: {
                    options: {
                        data: [],
                    },
                    columns: [
                        { type: "selection", width: 60 },
                        { label: "用户名", prop: "username" },
                        //render演示
                        {
                            label: "头像",
                            render: (row) => {
                                return (
                                    <el-avatar size={30} src={row.avatar}></el-avatar>
                                )
                            }
                        },
                        {
                            label: "是否启用",
                            prop: "state",
                            formatter: ({ state }) => {
                                return state ? "是" : "否";
                            },
                            // 筛选演示
                            columnKey: "state",
                            filters: [
                                { text: "是", value: 1 },
                                { text: "否", value: 0 },
                            ],
                            ["filter-method"] (value, row, column) {
                                return row.state === value;
                            },
                        },
                        {
                            label: "创建时间",
                            prop: "createdTime",
                            sortable: true,
                        },
                        // 插槽演示
                        // {
                        //     label: "操作",
                        //     type: "slot",
                        //     slotName: "operate",
                        // },
                        // render样式
                        {
                            label: "操作",
                            render: (row) => {
                                return (
                                    <span>
                                        <el-button type="text" size="small" on-click={() => { this.addOrEdit(row) }}> 编辑 </el-button>
                                        <el-button type="text" size="small" on-click={() => { this.del(row.id); }} >删除</el-button>
                                    </span>
                                );
                            },
                        },
                    ],
                    events: {
                        "selection-change": (list) => {
                            this.batchId = list.map((item) => item.id);
                        },
                    },
                },
                toolbarConfig: [
                    {
                        slotName: 'input'
                    },
                    {
                        content: '新增', type: "primary", icon: "el-icon-plus", click: () => {
                            this.addOrEdit();
                        }
                    },
                    {
                        content: "批量删除",
                        icon: "el-icon-delete",
                        click: () => this.del(),
                    },
                ],
                pagerConfig: {
                    options: {
                        pageSize: 10,
                    },
                    events: {},
                },
                proxyConfig: {
                    api: "getUserList",
                    //请求之前
                    beforeQuery (params) {
                        return params;
                    },
                },
                formConfig: {
                    options: {
                        inline: true,
                        // size: 'mini',
                    },
                    items: [
                        {
                            formItem: { label: "用户名" },
                            itemRender: {
                                el: "el-input",
                                placeholder: "搜索用户名",
                                value: "username",
                            },
                        },
                        {
                            type: 'button',
                            formItem: {
                                children: [
                                    { content: '查询', submit: true, type: 'primary' },
                                    { content: '重置', reset: true }
                                ]
                            }
                        }
                    ],
                },
            },
        };
    },
    methods: {
        addOrEdit (row) {
            this.$dialog({
                options: {
                    center: true,
                    width: '430px'
                },
                btns: [
                    {
                        submit: true, type: "primary", content: "确定", click: (options) => {

                            this.$refs.form.submitForm().then(async params => {
                                let interfaceType = 'addUser'
                                if (row) {
                                    interfaceType = 'addUser'
                                }
                                const res = await this.$api[interfaceType](params);
                                res && this.$message({
                                    message: row ? '编辑成功！' : '添加成功！',
                                    type: 'success'
                                });
                                this.$refs.grid.getData();
                                options.dialogVisible = false
                            })
                        }
                    },
                    {
                        content: "取消", click: (options) => {
                            options.dialogVisible = false
                        }
                    }
                ],
                render: () => {
                    this.formConfig.formData = row || null;
                    return (
                        <ChfForm  {...{ attrs: this.formConfig }} ref="form" />
                    )
                },
            })
        },
    }
};
</script>

<style lang="scss" scoped>
.page {
    background: white;
}
</style>